import * as echarts from '../../components/ec-canvas/echarts'; //引入echarts.js
import * as liquidfill from '../../components/ec-canvas/echarts-liquidfill.min'; //引入echarts.js
let util = require('../../utils/util')
var dataList = [];
Page({
    data: {
        ec: {
            lazyLoad: true // 图标延迟加载
        },
        hour:'00',
        minute:'00',
        second:'00',
        startTimer: false,// 是否开始倒计时
    },
    onLoad() {
        this.getData(); // 后台接口获取数据
    },
    getData: function () {
        this.init_echarts(); //初始化图表
    },
    timerBtnFuc(e){
        let count = 0
        if(e.currentTarget.dataset.type === 'end'){
            this.setData({
                startTimer: false,
            })
            count = 0
            clearInterval(this.timer)
            return
        }
        this.timer = setInterval(()=> {
            count++;
            this.setData({
                hour: this.formatTime(parseInt(count / 60 / 60)),
                minute: this.formatTime(parseInt(count / 60) % 60),
                second: this.formatTime(count % 60),
            })
        }, 1000)
        this.setData({
            startTimer: true,
        })
    },
    formatTime(num){
        if(num < 10){
            return '0'+num
        }else{
            return num
        }
    },

    //初始化图表
    init_echarts: function () {
        this.selectComponent('#mychart').init((canvas, width, height) => {
            const Chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            Chart.clear();
            // Chart.setOption(this.getOption(50));
            let num = 0
            let oTime = setInterval(() => {
                num++
                if (num == 100) {
                    clearInterval(oTime)
                    num = 100
                }
                Chart.setOption(this.getOption(num));
            }, 1000)
            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return Chart;
        });
        this.selectComponent('#dispace_charts').init((canvas, width, height, dpr) => {
            // 获取组件的 canvas、width、height 后的回调函数
            // 在这里初始化图表
            const Chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
            });
            Chart.setOption(this.getLiquidfill(0.7));
            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return Chart;
        });
    },
    getOption: function (num) {
        let colorFormatOnChart = util.colorFormatOnChart(num)
        let textColor = colorFormatOnChart[colorFormatOnChart.length-2][1] || '#c9080b'
        if(num == 0){
            textColor = '#A7ABA1'
        }
        let option = {
            background: '#999999',
            grid: {
                left: '4%',
                bottom: '10%',
                containLabel: true
            },
            series: [{
                    type: 'gauge',
                    radius: '80%',
                    splitNumber: 50,
                    min: 0,
                    max: 100,
                    center: ['50%', '50%'],
       
                    // detail: {
                    //     // offsetCenter: [0, 100],
                    //     color: '#fff',
                    //     fontSize: 22,
                    //     formatter: ' '
                    // },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999',
                            width: 5
                        }
                    },
       
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        length: 6,
                        lineStyle: {
                            width: 2,
                            color: '#545252'
                        }
                    },
                    axisLabel: {
                        show: false
                    }
                },
       
                {
                    name: '',
                    type: 'gauge',
                    splitNumber: 12, //刻度数量
                    min: 0,
                    max: 100,
                    radius: '100%', //图表尺寸
                    center: ['50%', '50%'],
                    // title: {
                    //     show: true,
                    //     offsetCenter: [0, '25%'], // x, y，单位px
                    //     textStyle: {
                    //         color: '#36ce9b',
                    //     }
                    // },
                    detail: {
                        show: true,
                        offsetCenter: [0, 0],
                        color: textColor,
                        fontWeight: "bolder",
                        fontSize: 40,
                        formatter: num + '%',
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 0,
                            shadowBlur: 0,
                            color: colorFormatOnChart,
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: 'auto',
                            width: 3
                        },
                        length: 20,
                        splitNumber: 6
                    },
                    splitLine: {
                        show: false,
                        length: 30,
                        lineStyle: {
                            color: 'auto',
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: { //仪表盘指针
                        show: 0,
                        length: '70%',
                        width: 2
                    },
                    axisLabel: {
                        show: true,
                        color: '#404040',
                        formatter:function(value){
                            if(value == 0 || value == 50 || value == 100){
                                return value
                            }
                        },
                        distance: 10
                    },
                    data: [{
                        name: "",
                        value: num
                    }]
                }
            ]
        };
        return option
    },
    getLiquidfill(value) {
        var option = {
            series: [{
                    type: 'liquidFill',
                    data: [value, value], // data个数代表波浪数
                    color: ['#16325a', '#0a5e9e'],
                    backgroundStyle: {
                        borderWidth: 10,
                        borderColor: '#354556',
                        color: '#18284b'
                    },
                    amplitude: 3,
                    radius: '90%',
                    label: {
                        normal: {
                            formatter: (value * 100).toFixed(0) + '%',
                            textStyle: {
                                fontSize: 26,
                                color: '#FFF100'
                            }
                        }
                    },
                    outline: {
                        show: false,
                    }
                }

            ]
        }
        return option

    },
    onShow: function () {
        // 在当前页面， 保持屏幕常亮，防止息屏
        wx.setKeepScreenOn({
            keepScreenOn: true
        })
    },

})